<template>
  <div class="am-l">
    <div
      class="attach"
      v-for="(item, index) in props.attachList"
      :key="index"
    >
      <div class="img-box">
        <n-image
          ref="prev"
          :src="hadnleSrc(item.path)"
          :fallback-src="VOtherImg"
          :preview-src="previewSrc"
          :preview-disabled="previewDisable"
          style="width: 100%; height: 100%"
        />
      </div>
      <NEllipsis
        style="padding: 0 15rem; font-size: 14rem; max-width: 90%"
      >
        {{ item.name }}
      </NEllipsis>
      <NSpace>
        <NButton
          type="primary"
          class="btn"
          ghost
          @click="preview(item)"
        >
          <n-icon
            size="14"
            style="margin-right: 5rem"
          >
            <VisibilityOutlined />
          </n-icon>
          预览
        </NButton>
        <NButton
          type="primary"
          class="btn"
          ghost
          @click="downLoad(item)"
          :loading="downLoading"
        >
          <n-icon size="14">
            <VerticalAlignBottomFilled />
          </n-icon>
          下载
        </NButton>
      </NSpace>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { VisibilityOutlined, VerticalAlignBottomFilled } from '@vicons/material'
import { NButton, NSpace, NIcon, NImage, useMessage, NEllipsis } from 'naive-ui'
import VWordImg from '@/assets/images/word.png'
import VZipImg from '@/assets/images/zip.png'
import VPdfImg from '@/assets/images/pdf.png'
import VExcelImg from '@/assets/images/excel.png'
import VOtherImg from '@/assets/images/other.png'
import router from '@/router'

const imgSuffix = ['jpeg', 'gif', 'svg', 'png', 'pjpeg', 'jpg']
const message = useMessage()
const props = defineProps({ attachList: { type: Array<any>, default: () => [] } })

// 默认附件图片显示
const hadnleSrc = (link: any) => {
  const tmp = link ? link.split('.') : ''
  if (imgSuffix.includes(tmp[tmp.length - 1])) {
    return link
  } else if (['xlsx', 'xls'].includes(tmp[tmp.length - 1])) {
    return VExcelImg
  } else if (['docx'].includes(tmp[tmp.length - 1])) {
    return VWordImg
  } else if (['zip'].includes(tmp[tmp.length - 1])) {
    return VZipImg
  } else if (['pdf'].includes(tmp[tmp.length - 1])) {
    return VPdfImg
  } else return VOtherImg
}
// 预览附件
const prev = ref<any>()
const previewSrc = ref<any>(null)
const previewDisable = ref(true)
const preview = async (row: any) => {
  const tmp = row.path.split('.')
  previewDisable.value = false
  if (imgSuffix.includes(tmp[tmp.length - 1])) {
    previewSrc.value = row.path
    setTimeout(() => {
      prev.value[0].click()
      previewDisable.value = true
    }, 0)
  } else if (['xlsx', 'xls', 'pdf', 'docx'].includes(tmp[tmp.length - 1])) {
    previewDisable.value = true
    router.push({ path: '/OA/Common/AttachContent', query: { id: row.id } })
  } else message.error('暂不支持该类型预览功能')
}
// 下载附件
const downLoading = ref(false)
const downLoad = async (row: any) => {
  try {
    downLoading.value = true
    const a = document.createElement('a')
    const bold: any = await fetch(row.path).then((e) => e.blob())
    a.href = window.URL.createObjectURL(bold)
    a.download = row.name
    a.click()
    window.URL.revokeObjectURL(a.href)
    downLoading.value = false
    message.success('下载附件成功')
  } catch {
    downLoading.value = false
    message.error('下载附件失败')
  }
}
</script>
<style scoped lang="scss">
.am-l {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-evenly;
  gap: 15rem;
}

.attach {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 168rem;
  height: 140rem;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  margin-right: 15rem;

  .img-box {
    width: 50rem;
    height: 50rem;
    background-color: #ebeceb;
    overflow: hidden;
  }

  .btn {
    display: flex;
    justify-content: center;
    width: 63rem;
    height: 24rem;
    font-size: 14rem;
    padding: 0;
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
